2023/12/232959字符

Promise 承诺

  • Promise 无法消除回调,只是让回调变的可控;
  • Promise 的出现最重要的是为了统一 JS 中的异步实现方式。即便没有 Promise,回调地狱的问题已可以通过很多种方式解决
    • async await
    • generators
    • MessageChannel
    • Observables
    • Streams
let promise = new Promise((resolve, reject) => {});
promise.then();  // 习惯用于成功处理函数
promise.catch();  // 错误处理函数
promise.finally();  // ES2018 只要是已决状态就执行(无参)
promise.all();  // 同时处理多个异步函数(更适合彼此相互依赖或者在其中任何一个 reject 时立即结束)

Promise.allSettled([]);  // ES2020 返回一个在所有给定的 promise 都已经 fulfilled 或 rejected 后的 promise
  • 如果当前的 Promise 是未决状态,得到的新的 Promise 是挂起状态
  • 如果当前的 Promise 是已觉状态,会影响到后续的处理函数

Promise 应用

new Promise((resolve, reject) => {
    console.log('走吧,去看电影');
    setTimeout(() => {
        if (Math.random() < .3) {
            resolve();  // 异步处理函数,推向 resolve 状态
        } else {
            reject();  // 异步处理函数,推向 reject 状态
        }
    }, 1000)
}).then(() => {
    console.log('好啊');
}, () => {
    console.log('不去');
})

渣男形象

const girlArr = ['翠花', '小美', '阿休', '姗姗', '舒舒', '欣欣', '若若'];
function lookupGirlFriend(arr) {
    arr.forEach((val, i) => {
        console.log(`${val}, 处对象吗?`);
        setTimeout(() => {
            return new Promise((success, fail) => {
                if (Math.random() < .2) {
                    success(`${val}:好啊`);
                } else {
                    fail(`${val}:渣男,滚。`);
                }
            }).then(data => console.log(data), err => console.log(err))
        }, 1000)
    })
}
lookupGirlFriend(girlArr);

找对象

const girlArr = ['翠花', '小美', '阿休', '姗姗', '舒舒', '欣欣', '若若'];
let index = 0, flag = true;

function lookupGirlFriend(val) {
    console.log(`${val}, 处对象吗?`);
    setTimeout(() => {
        return new Promise((success, fail) => {
            if (Math.random() < .3) {
                success(`${val}:好啊`);
                clearInterval(timer);
            } else {
                fail(`${val}:渣男,滚。`);
            }
            flag = true;
        }).then(data => console.log(data), err => console.log(err));
    }, 1500)
    flag = false;
}

let timer = setInterval(() => {
    if (flag === false) {
        return false;
    }
    if (index >= girlArr.length - 1){
        clearInterval(timer)
    }
    lookupGirlFriend(girlArr[index]);
    index ++;
}, 1500);